<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../img/shortcut.png"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>大腕</title>
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../css/animation.css"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*初始化类*/
        @charset "UTF-8";
        html{
            font-family: sans-serif;
        }
        html,body {
            -webkit-touch-callout:none;
            -webkit-text-size-adjust:none;
            -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
            -webkit-user-select:none;
            width: 100%;
            height: 100%;
        }
        html,body,header,section,footer,div,ul,ol,li,img,a,span,em,del,legend,center,strong,var,fieldset,form,label,dl,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea,h1,h2,h3,h4,h5,h6,p{
            margin:0;
            border:0;
            padding:0;
            font-style:normal;
        }
        .mySlideUp{
            animation-name: mySlideUp;
            -webkit-animation-name: mySlideUp;

            animation-duration: 1s;
            -webkit-animation-duration: 1s;

            animation-timing-function: ease;
            -webkit-animation-timing-function: ease;

            visibility: visible !important;
        }

        @keyframes mySlideUp {
            0% {
                transform: translateY(100%);
            }
            50%{
                transform: translateY(-8%);
            }
            65%{
                transform: translateY(4%);
            }
            80%{
                transform: translateY(-4%);
            }
            95%{
                transform: translateY(2%);
            }
            100% {
                transform: translateY(0%);
            }
        }
        @-webkit-keyframes mySlideUp {
            0% {
                -webkit-transform: translateY(100%);
            }
            50%{
                -webkit-transform: translateY(-8%);
            }
            65%{
                -webkit-transform: translateY(4%);
            }
            80%{
                -webkit-transform: translateY(-4%);
            }
            95%{
                -webkit-transform: translateY(2%);
            }
            100% {
                -webkit-transform: translateY(0%);
            }
        }
        .mySlideLeft{
            animation-name: mySlideLeft;
            -webkit-animation-name: mySlideLeft;

            animation-duration: 1.2s;
            -webkit-animation-duration: 1.2s;

            animation-timing-function: ease;
            -webkit-animation-timing-function: ease;

            visibility: visible !important;
        }

        @keyframes mySlideLeft {
            0% {opacity: 0;
                transform: translateX(80%);
                -webkit-transform: translateX(80%);
            }
            100% {opacity: 1;
                transform: translateX(0%);
                -webkit-transform: translateX(0%);
            }
        }

        @-webkit-keyframes mySlideLeft {
            0% {
                opacity: 0;
                transform: translateX(80%);
                -webkit-transform: translateX(80%);
            }
            100% {opacity: 1;
                transform: translateX(0%);
                -webkit-transform: translateX(0%);
            }
        }

        .mySlideRight{
            animation-name: mySlideRight;
            -webkit-animation-name: mySlideRight;

            animation-duration: 1.2s;
            -webkit-animation-duration: 1.2s;

            animation-timing-function: ease-out;
            -webkit-animation-timing-function: ease-out;

            visibility: visible !important;
        }

        @keyframes mySlideRight {
            0% {opacity: 0;
                transform: translateX(-80%);
                -webkit-transform: translateX(-80%);
            }
            100% {opacity: 1;
                transform: translateX(0%);
                -webkit-transform: translateX(0%);
            }
        }

        @-webkit-keyframes mySlideRight {
            0% {opacity: 0;
                transform: translateX(-80%);
                -webkit-transform: translateX(-80%);
            }
            100% {opacity: 1;
                transform: translateX(0%);
                -webkit-transform: translateX(0%);
            }
        }
        .mySlideUp2{
            animation-name: mySlideUp2;
            -webkit-animation-name: mySlideUp2;

            animation-duration: 0.5s;
            -webkit-animation-duration: 0.5s;

            animation-timing-function: ease-out;
            -webkit-animation-timing-function: ease-out;

            visibility: visible !important;
        }

        @keyframes mySlideUp2 {
            0% {opacity: 0;
                transform: translateY(30%);
                -webkit-transform: translateY(30%);
            }
            100% {opacity: 1;
                transform: translateY(0%);
                -webkit-transform: translateY(0%);
            }
        }
        @-webkit-keyframes mySlideUp2 {
            0% {opacity: 0;
                transform: translateY(30%);
                -webkit-transform: translateY(30%);
            }
            100% {opacity: 1;
                transform: translateY(0%);
                -webkit-transform: translateY(0%);
            }
        }
        body{
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 100%;
            transition: background 0.8s linear;
            -webkit-transition: background 0.8s linear;
            -o-transition: background 0.8s linear;
            -moz-transition: background 0.8s linear;
            max-width: 640px;
            margin: 0 auto;
            }
        .container{
            max-width: 640px;
            width: 100%;
            padding-top: 130px;
        }
        .images{
            margin: 0 45px;
        }
        .images img{
            visibility: hidden;
            display: block;
            width: 100%;
        }
        .img1{
            width: 100%;
            margin: 30px 0 20px 0;
        }
        .img2{
            visibility: hidden;
            opacity: 0;
            transition: all 0.8s linear;
            -webkit-transition: all 0.8s linear;
        }
        .img3{
            margin-top: 20px;
        }
        .bottom{
            padding-top: 10px;
            width: 282px;
            margin: 0 auto;
        }
        .btn{
            display: inline-block;
            margin: 20px auto 0;
            width: 130px;
            border: 1px solid #fff;
            border-radius: 3px;
            text-align: center;
            line-height: 35px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            visibility: hidden;
            text-decoration: none;
            overflow: hidden;
        }
        .btn1{
            margin-right: 10px;
        }
        .bottom .btn .fa{
            font-size: 20px;
            line-height: 35px;
            margin-left: 5px;
            margin-right: 8px;
            float: left;
        }
        .bottom .btn .word{
            float: left;
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            transition: all 0.5s ease;
            -webkit-transition: all 0.5s ease;
        }
        .footer{
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 10px;
            text-align: center;
            color: #ccc;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="container">
    <div class="images">
        <img class="logo" src="../img/logo.png" alt=""/>
        <img class="img1" src="../img/img1.png" alt=""/>
        <img class="img2" src="../img/img2.png" alt=""/>
        <img class="img3" src="../img/img3.png" alt=""/>
    </div>
    <div class="bottom">
        <a href="#" class="btn btn1" onclick="tips()">
            <span class="fa fa-apple"></span>
            <span class="word">iPhone版下载</span>
        </a>
        <a href="#" class="btn" onclick="tips()">
            <span class="fa fa-android"></span>
            <span class="word">Android版下载</span>
        </a>
    </div>
</div>
<div class="footer">版权所有 ©成都京瑞科技有限公司</div>
</body>
<script src="../script/jquery-1.11.3.min.js"></script>
<script>
    function tips(){
        alert('正在开发中，敬请期待！')
    }
    window.onload = function(){
        var bg = parseInt(Math.random()*20)+1;
        $('body').css('background-image','url("../img/wap_bg'+bg+'.png")');
        $('.mask').css({'visibility':'hidden','opacity':'0'});
        setTimeout(function(){
            $('.img2').css({'visibility':'visible','opacity':'1'});
        },500);
        setTimeout(function(){
            $('.img1').addClass('mySlideRight');
        },1300);
        setTimeout(function(){
            $('.img3').addClass('mySlideLeft');
        },1400);
        setTimeout(function(){
            $('.logo').addClass('fadeIn');
        },2400);
        setTimeout(function(){
            $('.btn').addClass('mySlideUp2');
        },3800);
    }
</script>
</html>